<html>
    <head>
        <title>Wi-Fi 智能家居</title>
    </head>
    <body>
        <style type="text/css">
            .chooseBtn {
                display: none;
            }
    
            .choose-label {
                box-shadow: #ccc 0px 0px 0px 1px;
                width: 40px;
                height: 20px;
                display: inline-block;
                border-radius: 20px;
                position: relative;
                background-color: #bdbdbd;
                overflow: hidden;
            }
    
            .choose-label:before {
                content: '';
                position: absolute;
                left: 0;
                width: 20px;
                height: 20px;
                display: inline-block;
                border-radius: 20px;
                background-color: #fff;
                z-index: 20;
                -webkit-transition: all 0.2s;
                transition: all 0.2s;
            }
    
            .chooseBtn:checked + label.choose-label:before {
                left: 20px;
            }
    
            .chooseBtn:checked + label.choose-label {
                background-color: #51ccee;
            }
        </style>
        <p>Hello World!</p>
        <script>
            //发送HTTP请求
            function sendRequest(checkbox)
            {
                var req = new XMLHttpRequest();
                if (checkbox.checked)
                {
                    req.open("GET", "/?switch=on");
                }
                else
                {
                    req.open("GET", "/?switch=off");
                }
                req.send();
            }

            //发送请求，更新数据
            function updateData()
            {
                var req = new XMLHttpRequest();
                req.open("GET", "/sensor");
                req.send();
                req.onloadend = function(){
                    sensor = JSON.parse(req.responseText)
                    document.getElementById("temp").innerText = "温度：" + sensor.temp + "℃";
                    document.getElementById("humi").innerText = "湿度：" + sensor.humi + "%";
                }
            }

            setInterval(updateData, 1000);
        </script>
        <input type="checkbox" name="switch" id="switch" class="chooseBtn" onclick="sendRequest(this)"/>
        <label for="switch" class="choose-label"></label>
        <p id="temp">温度</p>
        <p id="humi">湿度</p>
    </body>
</html>


